/**
 * Created by arvin on 2017/4/5 0005.
 */
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import { message,Alert,Modal,Form, Icon, Input, Button, Checkbox } from 'antd';
const FormItem = Form.Item;

class NormalLoginForm extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (err) {
                console.log('Received values of form: ', values);
                return ;
            }
            fetch('/api/login.json', {
                method: 'POST',
                body:JSON.stringify(values),
                cache: 'reload',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                }
            })  .then((res)=> res.json())
                .then((res) => {
                    console.log(res);

                    if(res.ok){


                               message.success('login sucess');


                    }else {
                        message.error('login fail');
                    }
                })
                .then((value) => {
                    console.log('222');
                })
                .catch((err) => {
                    console.log('333');
                });
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit} className="login-form">
                <FormItem>
                    {getFieldDecorator('name', {
                        rules: [{ required: true, message: 'Please input your name!' }],
                    })(
                        <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="name" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                        <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: true,
                    })(
                        <Checkbox>Remember me</Checkbox>
                    )}

                    <Button type="primary" htmlType="submit" className="login-form-button">
                        Log in
                    </Button>

                </FormItem>
            </Form>
        );
    }
}

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
export default class LoginPop extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modal1Visible: false
        }
    }

    setModalVisible(modalVisible) {
        this.setState({ modalVisible });
    }
    render() {
        return (
            <div className="headlogout">
                <Button type="link" onClick={() => this.setModalVisible(true)} ghost>login</Button>
                <Modal
                    title="Login"
                    wrapClassName="vertical-center-modal"
                    visible={this.state.modalVisible}
                    onCancel={() => this.setModalVisible(false)}
                    footer={null}
                >
                    <WrappedNormalLoginForm/>
                </Modal>
            </div>
        );
    }
}